<template>
  <div ref="graphWrapRef">
    <h2>我的第八个mxgraph</h2>
    <button @click="hideMenu">隐藏弹出菜单</button>
    <div id="graphcontainer" ref="graphcontainer" class="graphWrap graph-edit"></div>
  </div>
</template>

<script>
import mxgraph from '@/utils/mxgraph'
import graphMixin from './graphMixin'
const { mxEvent, mxRubberband, mxGraph, mxConstants, mxGraphModel } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel

export default {
  mixins: [graphMixin],
  props: {
    msg: String,
  },
  data() {
    return {
      graph:null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 
      var container = document.getElementById('graphcontainer')
     // mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      this.graph=graph
      graph.setTooltips(true);

      // Enables rubberband selection
      new MxRubberband(graph)
      this.initPopupMenu(graph)

      // Gets the default parent for inserting new cells. This
      // is normally the first child of the root (ie. layer 0).
      var parent = graph.getDefaultParent()

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate()
      try {
        mxConstants.HANDLE_FILLCOLOR = 'gray'
        var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30)
        v1.geometry.relative = false
        var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30, "strokeColor=red;");
        graph.insertEdge(parent, null, '', v1, v2)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },
    hideMenu(){
      this.graph.popupMenuHandler.hideMenu()
    }
  },
}
</script>

<style scoped>
.graphWrap {
  position: relative;
  overflow: hidden;
  width: 321px;
  height: 241px;
  cursor: default;
  border: 1px solid grey;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


<style >
/* 弹出菜单的样式单 */
body div.mxPopupMenu {
  -webkit-box-shadow: 3px 3px 6px #c0c0c0;
  -moz-box-shadow: 3px 3px 6px #c0c0c0;
  box-shadow: 3px 3px 6px #c0c0c0;
  background: white;
  position: absolute;
  border: 3px solid #e7e7e7;
  padding: 3px;
}
body table.mxPopupMenu {
  border-collapse: collapse;
  margin: 0px;
}
body tr.mxPopupMenuItem {
  color: black;
  cursor: default;
}
body td.mxPopupMenuItem {
  padding: 6px 60px 6px 30px;
  font-family: Arial;
  font-size: 10pt;
}
body td.mxPopupMenuIcon {
  background-color: white;
  padding: 0px;
}
body tr.mxPopupMenuItemHover {
  background-color: #eeeeee;
  color: black;
}
table.mxPopupMenu hr {
  border-top: solid 1px #cccccc;
}
table.mxPopupMenu tr {
  font-size: 4pt;
}
</style>


